<template>
	<div id="app">
		<div class="container">
			<div class="row " style="border-top: .0125rem solid #eaecef">
				<div class="col-4 d-sm-block d-none" style="padding-right:2.5rem; border-right: .0125rem solid #ccc;">
					<tree-n @toggle="handleToggle" :activeFIndex="IndexItem" @node-clicked="handleNodeClick"
						class="mt-3" :treeData="treeData"></tree-n>
				</div>
				<div class="col d-flex flex-column  align-items-center " style="position: relative;">
					<div class="mt-3 row flex-column" style="height: 500px;">
						<h3 class="d-flex align-items-center">id:<div>{{ active.id }}</div>---- 组织名：<div>{{ active.name
								}}
							</div>
						</h3>
						<div class="">拿着id发请求获取数据回来</div>

					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-4"></div>
				<div class="col-8 d-sm-block d-none" style="border-top: .0125rem solid #eaecef;">
					<!-- 底部切换按钮组件 -->
					<div style="position: absolute; bottom: 0;padding: 10px 0;" class="row ">
						<com-fnav :treeData="treeData" @handleGetTreeIndex1="GetTreeIndex1" :active="active"></com-fnav>
					</div>
				</div>
			</div>

		</div>

	</div>

</template>

<script>
import TreeN from '@/components/TreeN.vue';
import ComFnav from '@/components/ComFnav.vue'

export default {
	name: 'App',
	components: {
		TreeN,
		ComFnav
	},
	data() {
		return {
			IndexItem: {},
			active: { name: '产品介绍', id: 11 },
			treeData: [
				{
					name: 'FluxMQ',
					id: 1,
					children: [
						{ name: '产品介绍', id: 11 },
						{ name: '功能概览', id: 12 },
					],
				},
				{
					name: '安装部署',
					id: 2,
					children: [
						{ name: '系统优化', id: 22 },
						{ name: 'Docker', id: 23 },
						{ name: 'Windows安装', id: 24 },
						{ name: 'IOS安装', id: 25 },
					],
				},
				{
					name: '配置指南',
					id: 3,
					children: [
						{ name: '前言', id: 31 },
						{ name: 'MQTT配置', id: 32 },
						{ name: '连接祠配置', id: 33 },
						{ name: '集群配置', id: 34 },
					],
				},
				{
					name: '功能',
					id: 4,
					children: [
						{ name: '管理页面', id: 41 },
						{ name: 'MQTT配置', id: 42 },
						{ name: '连接祠配置', id: 43 },
						{ name: '集群配置', id: 44 },
					],
				},
				{
					name: '规则引擎',
					id: 5,
					children: [
						{
							name: '管理页面', id: 51,

						},
						{ name: 'MQTT配置', id: 52 },
						{ name: '连接祠配置', id: 53 },
						{ name: '集群配置', id: 54 },
					],
				}

			]
		};
	},
	methods: {
		handleToggle(e) {

		},
		handleNodeClick(item) {
			this.active = item
		},
		GetTreeIndex1(activeIndex, activeChildIndex, act) {
			console.log("111111111111111111111111111111", act);
			this.active = act
			this.IndexItem = { activeIndex, activeChildIndex };

		}
	},
};
</script>

<style scoped>
#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	text-align: center;
	color: #2c3e50;
	/* margin-top: .75rem; */
}

.container {
	margin-top: 5%;

}

.container .row {}

.container .row:nth-child(2) {
	margin-left: 30px;
}
</style>
